<template>
    <div>
        <div class="category-header">
            <router-link tag="span" to="/index/info"><svg t="1640164914293" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="64511" width="16" height="16"><path d="M744.3372563 1017.13692445c11.1289837 0 22.2701037-4.2477037 30.76551111-12.74311112 16.99081482-16.99081482 16.99081482-44.54020741 0-61.51888592L345.02883555 512.80099555 775.10276741 82.7392c16.99081482-16.97867852 16.99081482-44.54020741 0-61.51888592-16.99081482-16.99081482-44.52807111-16.99081482-61.51888593 0L252.74443852 482.04762075a43.51469037 43.51469037 0 0 0 0 61.53102222l460.83944296 460.81517036c8.48327111 8.49540741 19.62439111 12.74311111 30.75337482 12.74311112z" fill="#ffffff" p-id="64512"></path></svg></router-link>
            <div class="icont-header">我的荣誉</div>
        </div>

        <!-- 勋章内容 -->
        <div class="badge-header">
            <div class="badge-header-num">
                <output class="badge-coin-num">已获得 <strong class="badge-coin-num-strong">0</strong>/13</output>
            </div>
        </div>

        <!-- 勋章墙 -->
        <div class="badge-wrapper" id="elBadgeWrapper">
    
        
            <ul class="badge-ul-box">
            
                
                <li class="badge-logo-li jsBadge" data-logo="badge-1594742400000">
                    <div class="badge-logo-box">
                        
                        <img src="http://badge-image-1252317822.picsh.myqcloud.com/yydrun/0" class="badge-pic">
                        
                        <p class="badge-h">应援达人</p>
                    </div>
                </li>
                
            
                
                <li class="badge-logo-li jsBadge" data-logo="badge-1592366400000">
                    <div class="badge-logo-box">
                        
                        <img src="http://badge-image-1252317822.picsh.myqcloud.com/xdwkbun/0" class="badge-pic">
                        
                        <p class="badge-h">先读为快</p>
                    </div>
                </li>
                
            
                
                <li class="badge-logo-li jsBadge" data-logo="badge-1565688140000">
                    <div class="badge-logo-box">
                        
                        <img src="http://badge-image-1252317822.picsh.myqcloud.com/znjnun/0" class="badge-pic">
                        
                        <p class="badge-h">20周年</p>
                    </div>
                </li>
                
            
                
                <li class="badge-logo-li jsBadge" data-logo="badge-1552303258000">
                    <div class="badge-logo-box">
                        
                        <img src="http://badge-image-1252317822.picsh.myqcloud.com/bzzzun/0" class="badge-pic">
                        
                        <p class="badge-h">本章最赞</p>
                    </div>
                </li>
                
            
                
                <li class="badge-logo-li jsBadge" data-logo="badge-1550650110000">
                    <div class="badge-logo-box">
                        
                        <img src="http://badge-image-1252317822.picsh.myqcloud.com/jzzun/0" class="badge-pic">
                        
                        <p class="badge-h">金猪猪奖</p>
                    </div>
                </li>
                
            
                
                <li class="badge-logo-li jsBadge" data-logo="badge-1546941504000">
                    <div class="badge-logo-box">
                        
                        <img src="http://badge-image-1252317822.picsh.myqcloud.com/ypyxun/0" class="badge-pic">
                        
                        <p class="badge-h">月票英雄</p>
                    </div>
                </li>
                
            
                
                <li class="badge-logo-li jsBadge" data-logo="badge-1516796292000">
                    <div class="badge-logo-box">
                        
                        <img src="http://qidian.qpic.cn/qidian_common/349573/dbhjun/0" class="badge-pic">
                        
                        <p class="badge-h">打榜壕杰</p>
                    </div>
                </li>
                
            
                
                <li class="badge-logo-li jsBadge" data-logo="badge-1511578186000">
                    <div class="badge-logo-box">
                        
                        <img src="http://qidian.qpic.cn/qidian_common/349573/unite_fsdrun/0" class="badge-pic">
                        
                        <p class="badge-h">粉丝达人</p>
                    </div>
                </li>
                
            
                
                <li class="badge-logo-li jsBadge" data-logo="badge-1507603786413">
                    <div class="badge-logo-box">
                        
                        <img src="http://qidian.qpic.cn/qidian_common/349573/unite_yzqjun/0" class="badge-pic">
                        
                        <p class="badge-h">一掷千金</p>
                    </div>
                </li>
                
            
                
                <li class="badge-logo-li jsBadge" data-logo="badge-1507604040485">
                    <div class="badge-logo-box">
                        
                        <img src="http://qidian.qpic.cn/qidian_common/349573/unite_ssrmun/0" class="badge-pic">
                        
                        <p class="badge-h">嗜书如命</p>
                    </div>
                </li>
                
            
            <li class="badge-logo-li">
                <div class="badge-logo-box">
                    <img src="//qidian.gtimg.com/hongxium/img/badge-waiting-7f5f3273b4.png" alt="徽章" class="badge-pic">
                    <p class="badge-h">敬请期待</p>
                </div>
            </li>
            </ul>
        
</div>



    </div>
</template>

<script>
export default {
    
}
</script>

<style lang="less" scoped>
.category-header{
    width: 100%;
    height: 44px;
    background-color: #FC0E50;
    display: flex;
    align-items: center;
    span{
        display: block;
        width: 44px;
        height: 44px;
        text-align: center;
        line-height: 44px;
    }
    .icont-header{
        color: white;
        margin: auto;
        padding-right: 44px;
    }
}


.badge-header {
    min-height: 11.875rem;
    background: #FB338F url(/hongxium/img/center-badge-bg-4f85284998.png) no-repeat center;
    background-size: cover;
    margin-top: -2.75rem;
    text-align: center;
    color: #FFF;
    font-size: 0.875rem;
    overflow: hidden;
    .badge-header-num {
        position: relative;
        margin-top: 6.5625rem;
        padding-left: 1rem;
        color: #fff;
        .badge-coin-num {
            float: left;
            .badge-coin-num-strong {
                font-size: 2.25rem;
            }
        }
    }
}


.badge-wrapper {
    margin: -1.5rem 1rem 1rem;
    border: 1px solid #f8f8f8;
    -webkit-border-radius: 0.75rem;
    -moz-border-radius: 0.75rem;
    -ms-border-radius: 0.75rem;
    -o-border-radius: 0.75rem;
    border-radius: 0.75rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    min-height: 21.875rem;
    background: #fff;
    padding: 1.75rem 0.125rem;
    .badge-ul-box {
        padding: 0.9375rem 0;
        font-size: 0px;
        font-size: -webkit-calc(0px + 0px);
        line-height: 0;
        overflow: hidden;
        .badge-logo-li {
            line-height: 0.875rem;
            position: relative;
            display: block;
            width: 5rem;
            // vertical-align: top;
            padding: 0.25rem 0.9375rem 0.9375rem;
            float: left;
            .badge-logo-box {
                position: relative;
                display: block;
                margin: 0 auto;
                color: inherit;
                .badge-pic {
                    width: 5rem;
                    height: 5rem;
                    margin: 0 auto;
                    margin-bottom: 0.3125rem;
                    display: block;
                }
                .badge-h {
                    font-size: 0.875rem;
                    text-align: center;
                    height: 0.875rem;
                    line-height: 0.875rem;
                    overflow: hidden;
                    color: #7B7B7B;
                }
            }
        }
    }
}
</style>